<template>
  <div class="login-container">
    <div
      id="main2"
      :style="{ width: '95%', height: '350px' }"
    />
  </div>
</template>

<script scope>
// import echarts from "echarts";
import * as echarts from 'echarts'
import { getUseStatePercent } from '@/api/echarts'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      used: null,
      notused: null
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getUseStatePercent()
  },
  mounted() {
    setTimeout(() => {
      this.drawLine()
    }, 500)
  },
  methods: {
    getUseStatePercent() {
      getUseStatePercent().then((res) => {
        this.notused = res.data.data[0].value
        this.used = res.data.data[1].value
        this.drawLine()
      })
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const main2 = this.$echarts.init(document.getElementById('main2'))
      // 绘制图表
      main2.setOption({
        title: {
          text: '虚拟号使用占比',
          x: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: 'bottom'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}(张) ({d}%)'
        },
        series: [
          {
            name: '张数以及占比',
            type: 'pie',
            radius: [50, 100],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              {
                value: this.used,
                name: '已使用',
                itemStyle: {
                  color: 'skyblue'
                }
              },
              {
                value: this.notused,
                name: '未使用',
                itemStyle: {
                  color: '#FBCF6C'
                }
              }
            ]
          }
        ]
      })
    }
  }
}
</script>

<style scoped lang="less"></style>
